<template>
    <div class="mainContent">
        <el-row :gutter="20">
            <el-col :span="8">
                <!-- grid-content -->
                <el-card class="grid-content" shadow="always">
                    <span>用户总数量:<span v-loading="loading">{{ totalUser }}</span></span>
                    <el-button size='small' type="primary" @click="getTotalUser">刷新</el-button>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="grid-content" shadow="always">
                    <span>商品总数量:100</span>
                    <el-button size='small' type="primary">刷新</el-button>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <div class="container" ref="echartsEle" width="100%"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { StatisticUserAPI } from "@/api/statistic"

import * as echarts from "echarts";
console.log(echarts);


var options = {
    title: {  //echarts显示的标题
        // text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        orient:"vertical",
        right:"10px",
        top:"center",
        data: ['销量',"价格","库存"],
    },
    grid:{
        left:"5%",
        right:"10%",
    },
    xAxis: {    // x轴   => data显示的字段信息
        type:"category", 
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {
        type:"value",  // 显示数据
    },
    series: [{   //数据
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    },{   //数据
        name: '价格',
        type: 'bar',
        data: [66, 108, 200, 79, 204, 5]
    },{   //数据
        name: '库存',
        type: 'bar',
        data: [45, 30, 14, 40, 45, 34]
    }]
};


// console.log(StatisticUserAPI);

// 引入loadsh插件 -> 快捷使用防抖和节流函数
// import _ from "lodash";
// console.log("11111",_.debounce);
export default {
    name: "MainView",
    data() {
        return {
            totalUser: 0,
            loading: true,
            options: options,
        }
    },
    methods: {
        async getTotalUser() {
            this.loading = true;
            var res = await StatisticUserAPI();
            // console.log(123123,res);
            this.totalUser = res.data;
            this.loading = false;
        },
        initEcharts(){
            // 传入一个元素/css选择器 -> 作渲染echarts的元素
            var myEcharts = echarts.init(this.$refs.echartsEle);  

            //传入一个对象  用于配置echarts中的x轴 y轴 标题 数据等
            myEcharts.setOption(this.options)
        }
    },
    mounted() {
        this.getTotalUser();
        this.getTotalUser();
        this.initEcharts();
    }
}
</script>

<style lang="scss" scoped>
::v-deep .grid-content .el-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    height: 500px;
}
</style>